<template>
    <!-- 会员中心 -->
    <div class="memberContainer">
        <!-- 导航栏 -->
        <my-nav-bar title="个人中心"></my-nav-bar>
        <!-- 顶部 -->
        <header>
            <div class="userPhoto">
                <!-- <img :src="member.memberInfo.HeadImgUrl" alt=""> -->
                <img src="https://oss.aliyuncs.com/aliyun_id_photo_bucket/default_handsome.jpg" alt="">
            </div>
            <div class="userName">预览用户</div>
            <!-- <div class="userName">{{member.memberInfo.RealName}}</div> -->
            <div class="more">更多资料</div>
            <ul class="userLinks">
                <li v-for="item in userLinks" :key="item.id">
                    <span class="icon">
                        <img :src="item.icon" alt="">
                    </span>
                    <span class="txt">{{item.txt}}</span>
                </li>
            </ul>
        </header>
        <!-- 单元格 -->
        <div class="cells">
            <van-cell 
                :icon="item.icon" 
                :title="item.txt" 
                is-link 
                v-for="item in cells" 
                :key="item.id"/>
        </div>
        <!-- 底部栏 -->
        <my-tabbar :tabbarActive="4" :list="common.TabBar"></my-tabbar>
    </div>
</template>

<script>
// 引入 辅助函数
import { mapActions, mapState } from 'vuex'
// 引入 混入组件
import { pagemixin } from 'Mixins/pagemixin'
// 引入 公共组件
import MyNavBar from 'Components/common/MyNavBar'
import MyTabbar from 'Components/common/MyTabbar'

export default {
    mixins: [pagemixin],
    data() {
        return {
            userLinks: [{
                id: 1,
                icon: require('Img/member/daifukuan.png'),
                txt: '待付款'
            }, {
                id: 2,
                icon: require('Img/member/daifahuo.png'),
                txt: '待发货'
            }, {
                id: 3,
                icon: require('Img/member/daishouhuo.png'),
                txt: '待收货'
            }, {
                id: 4,
                icon: require('Img/member/daipingjia.png'),
                txt: '待评价'
            }, {
                id: 5,
                icon: require('Img/member/quanbudingdan.png'),
                txt: '全部订单'
            }],
            // 单元格
            cells: [{
                id: 1,
                icon: require('Img/member/youhuiquan.png'),
                txt: '优惠券',
                to: '/'
            }, {
                id: 2,
                icon: require('Img/member/huiyuanka.png'),
                txt: '会员卡',
                to: '/'
            }, {
                id: 3,
                icon: require('Img/member/jifen.png'),
                txt: '积分',
                to: '/'
            }, {
                id: 4,
                icon: require('Img/member/tuikezhongxin.png'),
                txt: '推客中心',
                to: '/'
            }, {
                id: 5,
                icon: require('Img/member/tuikuan.png'),
                txt: '退款/维权',
                to: '/'
            }, {
                id: 6,
                icon: require('Img/member/wodepingjia.png'),
                txt: '我的评价',
                to: '/'
            }, {
                id: 7,
                icon: require('Img/member/tuikezhongxin.png'),
                txt: '我的地址',
                to: '/'
            }, {
                id: 8,
                icon: require('Img/member/jifen.png'),
                txt: '我的收藏',
                to: '/'
            }, {
                id: 9,
                icon: require('Img/member/lianxikefu.png'),
                txt: '联系客服',
                to: '/'
            }]
        }
    },
    components: {
        MyNavBar,
        MyTabbar
    },
    async created() {
        // 获取用户信息
        // this.getMemberInfo()
    },
    methods: {
        ...mapActions(['getMemberInfo'])
    },
    computed: {
        ...mapState(['common', 'member'])
    }
}
</script>

<style lang="stylus">
    @import '~Css/_variable.styl'
    @import '~Css/_layout.styl'
    // 会员中心
    .memberContainer
        margin-top 46px
        margin-bottom 50px
        // 头部
        header
            position relative
            display flex
            flex-direction column
            align-items center
            height 5.54rem
            color #fff
            background-image: linear-gradient(to top, #fff,#ff9800);
            // background #ff9800
            // 头像
            .userPhoto
                margin-top 0.34rem
                width 1.12rem
                height 1.12rem
                border-radius 50%
                overflow hidden
                img 
                    width 100%
            // 用户名
            .userName
                margin-top 0.36rem
                margin-bottom 0.13rem
                font-size 0.18rem
            // 按钮 更多资料
            .more
                width 1.21rem
                height .41rem
                margin 0.1rem
                text-align center
                border 0.01rem solid #fff
                line-height 0.41rem
                font-size 0.11rem
                border-radius 0.21rem
                font-family PingFang-SC-Regular
            // 发货模块
            .userLinks
                position absolute
                left 0.24rem
                right 0.24rem
                bottom 0.39rem
                height 2rem
                background #fff
                display flex
                border-radius 0.08rem
                li
                    flex 1
                    height 100%
                    display flex
                    flex-direction column
                    justify-content center
                    align-items center
                    .icon
                        width 0.48rem
                        height 0.48rem
                        img 
                            width 100%
                    .txt
                        margin-top 0.24rem
                        font-size 0.24rem
                        color #424242
</style>
